<template>
	<view class="">
		<view style="height: 35px;"></view>
		<uni-icons type="closeempty" size="30" class="icon" @click="backLogin"></uni-icons>
		<view class="welcome">欢迎注册</view>
		<view class="loginNum">
			<view class="inputLogin">
				<input type="number" value="" placeholder="请输入手机号" />
				<input type="number" value="" placeholder="请输入验证码" />
				<button type="primary" size="mini" @click="getNumber" :class="getNum == 1 ? 'getNum' : ''">{{ getNumWord}}</button>
				<input type="text" value="" placeholder="密玛由8-20位英文字母、数字成符号组成" />
			</view>
			<button type="primary">注册</button>
		</view>
	</view>
	
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				getNum: 0,
				getNumWord: "获取验证码"
			}
		},
		methods: {
			backLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			getNumber() {
				this.getNum = 1;
				this.getNumWord = "已获取验证码"
			}
		}
	}
</script>

<style>
.icon {
	float: right;
	margin-top: 20rpx;
	margin-right: 20rpx;
	color: #989898 !important;
}
.welcome {
	font-size: 50rpx;
	line-height: 420rpx;
	width: 100%;
	text-align: center;
	color: #FED501;
}
.getNum {
	background-color: #CACACA;
}
.inputLogin {
	position: absolute;
	top: 400rpx;
	left: 0;
	right: 0;
	/* width: 500rpx; */
	height: 320rpx;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.inputLogin > input {
	border-bottom: 2rpx solid #dcdcdc;
	height: 60rpx;
}
.inputLogin > button {
	position: absolute;
	top: 120rpx;
	right: 12rpx;
	height: ;
}
.loginNum > button {
	position: absolute;
	bottom: 400rpx;
	left: 0;
	right: 0;
	margin-left: 20rpx;
	margin-right: 20rpx;
	background-color: #FED501;
}
.loginNum > text:nth-of-type(1) {
	position: absolute;
	bottom: 340rpx;
	left: 20rpx;
	font-size: 20rpx;
	color: #b5b5b5;
}
.loginNum > text:nth-of-type(2) {
	position: absolute;
	bottom: 330rpx;
	right: 20rpx;
	color: #FED501;
}
</style>
